var MapLayer = function( mapBuilder, layerId ) {

	this.map_builder_tab_xml = 'xml/map_builder_tab.xml';

	this.setMapBuilder = function( mapBuilder ) {
		this.mapBuilder_ = mapBuilder;
	};

	this.getMapBuilder = function() {
		return this.mapBuilder_;
	};

	this.setLayerId = function( layerId ) {
		this.layerId_ = layerId;
	};

	this.getLayerId = function() {
		return this.layerId_;
	};

	this.setTab = function( tab ) {
		this.tab_ = tab;
	};

	this.getTab = function() {
		return this.tab_;
	};

	this.setArea = function( area ) {
		this.area_ = area;
	};

	this.getArea = function() {
		return this.area_;
	};

	this.tileSize = function() {
		return new Point2d(
			  Math.floor( Util.valu( this.getLayerId() + '_tile_width' ) )
			, Math.floor( Util.valu( this.getLayerId() + '_tile_height' ) )
		);
	};

	this.setOffset = function( offset ) {
		this.offset_ = offset;
	};

	this.getOffset = function() {
		return this.offset_;
	};

	this.image = function() {
		return Util.attribute( Util.id( this.getLayerId() + '_tile_image' ), 'src' );
	};

	this.clickImage = function( event ) {
		var tile_size = this.tileSize();
		var width  = tile_size.getX();
		var height = tile_size.getY();

		var pos = Util.mousePosition( event, Util.id( this.getLayerId() + '_tile_image_div' ) );

		var x = Math.floor( pos.getX() / width ) * width;
		var y = Math.floor( pos.getY() / height ) * height;
		this.setOffset( new Point2d( x, y ) );

		var image = this.image();
		var node = Util.id( this.getLayerId() + '_current' );

		Util.cssSprite( node , image , width , height , x , y );
	};

	this.load_ = function() {
		var tabs = this.getMapBuilder().getTabs();
		this.setTab(  tabs.add( this.getLayerId() ) );
		this.setArea( tabs.getAreaByTab( this.getTab() ) );
		this.ajax_load_();
	};

	this.ajax_load_ = function() {
		var thiz = this;
		Ajax.ajax(
			this.map_builder_tab_xml
			, function( text ) { thiz.on_ajax_load_( text ); }
			, Ajax.TEXT
		);
	};

	this.on_ajax_load_ = function( text ) {
		this.getArea().innerHTML = text.replace( /LAYERID/g, this.getLayerId() );
		this.getMapBuilder().getTabs().enableTabByLabel( this.getLayerId() );
		this.create_map_( this.getMapBuilder().getMapsId() );
	};

	this.clickLoad = function() {
		Util.id( this.getLayerId() + '_tile_image' ).src = (
			 Util.valu( this.getLayerId() + '_tile_file' )
		);
		this.create_map_( this.getMapBuilder().getMapsId() );
	};

	this.mapClick = function( event ) {

		var absolute_mouse = MouseUtil.getMouseXY( event );
		var map_id = this.getLayerId() + '_map';
		var map = Util.id( map_id );
		var position_of_map = Util.elementPosition( map );
		var pos = new Point2d( 
			absolute_mouse.x - position_of_map.x
			, absolute_mouse.y - position_of_map.y 
		);

		var map_pos = this.screenToMap_iso( pos, true );

		var background = 'url( ' + this.image() + ' )';
		var backgroundPosition = ( ''
			+ '-' + this.getOffset().getX() + 'px' 
			+ ' '
			+ '-' + this.getOffset().getY() + 'px'
		);
		
		var id = this.idForTileCoordinates( map_pos.getX(), map_pos.getY() );
		var tile = Util.id( id );
		if ( tile ) {
			tile.style.background = background;
			tile.style.backgroundPosition = backgroundPosition;
		}

	};

	this.screenToMap_iso = function( p, toTile ) {

		var tile_size = this.tileSize();
		var tile_width  = tile_size.getX();
		var tile_height = tile_size.getY();

		var ho2 = Math.floor( tile_height / 2 );
		var wo2 = Math.floor( tile_width / 2 );

		var map_screen_h = 300;
		var h_max = map_screen_h / tile_height;
		var y_label_fix = Math.floor( h_max / 2 );

		var isox = p.getX();
		var isoy = p.getY();

		var map_y = ( 2 * isoy -isox ) / 2;
		var map_x = isox + map_y;

		// CAVEAT: these corrections may not be right...
		map_y += wo2 * y_label_fix + wo2 / 2;
		map_x += wo2 / 2;

		return (
			toTile
			? new Point2d( Math.floor( map_y / wo2 ), Math.floor( map_x / wo2 ) )
			: new Point2d( map_x, map_y )
		);
	};

	this.idForTileCoordinates = function( i, j ) {
		return this.getLayerId() + '_tile_' + i + '_' + j;
	};

	this.create_map_ = function( maps_id ) {
		var maps = Util.id( maps_id );
		var mapId = this.getLayerId() + '_map';
		var map = Util.id( mapId );

		if ( map ) {
			maps.removeChild( map );
		}

		var map_screen_w = Util.pxToInt( maps.style.width );
		var map_screen_h = Util.pxToInt( maps.style.height );

		/* what the heck? */
		if ( 0 == map_screen_w ) {
			map_screen_w = 400;
		}
		if ( 0 == map_screen_h ) {
			map_screen_h = 300;
		}

		map = Util.newNode( 'div' );
		map.style.position = 'absolute';
		map.style.width  = map_screen_w + 'px';
		map.style.height = map_screen_h + 'px';
		map.style.left = '0px';
		map.style.top = '0px';
		map.setAttribute( 'id', this.getLayerId() + '_map' );

		map.style.zIndex = this.getLayerId().replace( /^[^.]*\./, '' );

		var thiz = this;
		/*map.onclick = function( event ) { thiz.mapClick( event ); };*/

		var tile_size = this.tileSize();
		var tile_width  = tile_size.getX();
		var tile_height = tile_size.getY();

		var h_max = map_screen_h / tile_height;
		var w_max = map_screen_w / tile_width;

		var background = 'url( ' + this.image() + ' )';
//background = 'url( images/misc/transparent.png )';
					 
		var backgroundPosition = ( ''
			+ '-' + this.getOffset().getX() + 'px' 
			+ ' '
			+ '-' + this.getOffset().getY() + 'px'
		);

		var y = - tile_height / 2;

		var y_label_fix = Math.floor( h_max / 2 );

		var start_label_y = y_label_fix;
		var start_label_x = 0;

		var ho2 = tile_height / 2;
		var wo2 = tile_width / 2;

		for ( var i = 0 ; i < h_max * 2 + 1 ; i++, y+= tile_height / 2 ) {
			/* stagger step */
			var x = ( 0 == i % 2 ) ? - tile_width / 2 : 0;
			var label_y = start_label_y;
			var label_x = start_label_x;

			for ( var j = 0 ; j < w_max ; j++, x+= tile_width, label_y--, label_x++ ) {
				var id = this.idForTileCoordinates( label_y, label_x );

				var tile = Util.newNode( 'div' );
				tile.style.position = 'absolute';
				tile.style.width = tile_width + 'px';
				tile.style.height = tile_height + 'px';
				tile.style.left = x + 'px';
				tile.style.top = y + 'px';

//				tile.style.background = background;
//				tile.style.backgroundPosition = backgroundPosition;

				tile.setAttribute( 'id', id );

				// var isox = -wo2 -( label_y - label_x - y_label_fix ) * wo2;
				// var isoy = -ho2 +( label_x + label_y - y_label_fix ) * ho2;

				map.appendChild( tile );
			}

			if ( 1 == i % 2 ) {
				start_label_y++;
			} else {
				start_label_x++;
			}
		}
		maps.appendChild( map );
	};

	this.init = function( mapBuilder, layerId ) {
		this.setOffset( new Point2d( 0, 0 ) );
		this.setMapBuilder( mapBuilder );
		this.setLayerId( layerId );
		this.load_();
	};

	this.init( mapBuilder, layerId );



};
